/**
 * Created by Ysssssss on 21/2/26.
 */

import React, { PureComponent } from 'react'
import {withRouter} from "react-router-dom";
import { Button, Form, Input } from "antd";
import ImageUpload from "@common/presentational/ImageUpload";

import PageBackHeader from "@common/PageBackHeader";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {connect} from "react-redux";
import { createBrand, editBrand, employeeBrandLogin, getBrandInfo } from "@sagas/user";
import {setCookie} from "@utils/cookie";
import {setBilinInfo} from "@utils/localStorage";
import { getAppName } from "@utils/vars";

const initialValue = {
    logo: '',
    name: '',
    desc: '',
}
@connect(null, {
    getBrandInfo,
    createBrand,
    editBrand,
    employeeBrandLogin
})
@withRouter
class BrandEditPage extends PureComponent {
    constructor(props) {
        super(props);
        const { brandId } = getHistoryMatchParams(props)
        this.state = {
            formData: brandId ? null : {
                ...initialValue
            },
            editable: true
        }

        this.formRef = React.createRef()

        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
    }

    componentDidMount () {
        const { brandId } = getHistoryMatchParams(this.props)
        if (brandId) {
            this.props.employeeBrandLogin({
                brandId
            }, response => {
                const {brand_operator} = response
                setCookie('bilin-brand', response.token)
                setBilinInfo({
                    brandId,
                    storeId: 0
                })
                this.props.getBrandInfo((res) => {
                    const { logo, name, desc } = res
                    this.setState ({
                        formData: {
                            logo, name, desc
                        },
                        editable: brand_operator.is_super_admin || brand_operator.is_admin
                    })
                })
            })
        }
    }

    goBack () {
        this.props.history.goBack('/brand-list')
    }

    handleSubmit (values) {
        const { brandId } = getHistoryMatchParams(this.props)
        if (brandId) {
            this.props.editBrand({
                brandId,
                ...values
            }, () => {
                this.goBack()
            })
        } else {
            this.props.createBrand({
                ...values
            }, () => {
                this.goBack()
            })
        }
    }

    submitForm () {
        this.formRef.current?.submit()
    }

    render () {
        const { brandId } = getHistoryMatchParams(this.props)
        const { formData, editable } = this.state
        return (
            <div className="bilin-web">
                <PageBackHeader title={brandId ? '编辑品牌' : '创建品牌' } backUrl="/brand-list"/>
                <div className="bilin-web-body with-footer">
                    <div className="brand-edit-page">
                        { brandId ? null : (
                            <div className="create-banner mgb-48">
                                <p className="ft-20 clr-fff ft-w600">欢迎使用{getAppName()}</p>
                                <p className="ft-14 clr-fff ft-w400 opa-80">欢迎使用{getAppName()}</p>
                                <img src={require('@assets/image/hi-icon.png')} alt=""/>
                            </div>
                        ) }
                        { formData ? (
                            <Form
                                ref={this.formRef}
                                name="brand-edit"
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 20 }}
                                initialValues={formData}
                                scrollToFirstError={{
                                    behavior: actions =>
                                        actions.forEach(({ el, top, left }) => {
                                            el.scrollTop = top - 100
                                            el.scrollLeft = left
                                        }),
                                }}
                                onFinish={this.handleSubmit}
                            >
                                <Form.Item
                                    label='品牌logo'
                                    name='logo'
                                    rules={[{ required: true, message: '请上传品牌logo' }]}
                                >
                                    <ImageUpload
                                        disabled={!editable}
                                    />
                                </Form.Item>
                                <Form.Item
                                    label='品牌名'
                                    name='name'
                                    rules={[{ required: true, message: '请输入品牌名' }]}
                                >
                                    <Input placeholder="请输入品牌名"
                                           disabled={!editable}
                                    />
                                </Form.Item>
                                <Form.Item
                                    label='品牌简介'
                                    name='desc'
                                    rules={[{ required: true, message: '请输入品牌简介' }]}
                                >
                                    <Input.TextArea
                                        rows={4}
                                        placeholder="请输入品牌简介"
                                        style={{resize: 'none' }}
                                        disabled={!editable}
                                    />
                                </Form.Item>
                            </Form>
                        ) : null }
                    </div>
                </div>
                <div className="bilin-web-footer">
                    <Button disabled={!editable} type="primary" onClick={this.submitForm}>
                        {brandId ? (editable ? '保存编辑' : '只有管理员可以编辑') : '确定创建'}</Button>
                </div>
            </div>
        )
    }
}

export default BrandEditPage